<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/video.css"/>
		<link rel="stylesheet" href="icomoon/style.css" />
	</head>
	<body>
		<div id="container">
			<div id="divl">
				<div id="video">
					<video :src="sourse.soursePath" controls>
						<source src="myvideo.mp4" type="video/mp4"></source>
						<source src="myvideo.ogv" type="video/ogg"></source>
						<source src="myvideo.webm" type="video/webm"></source>
						<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
							<param name="movie" value="myvideo.swf" />
							<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
						</object>
						当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
					</video>
				</div>
				<div id="wrap">
					<div id="message">
						<div id="title">
							<h4>{{sourse.sourseName}}</h4>
							<div id="fire">
								<span class="icon-fire" style="color: red;"></span>
								<span id="count">{{sourse.collectCount}}</span>
							</div>
							<a @click="collect">收藏<span class="icon-star-full"></span></a>
						</div>
						<div id="author">
							<h4>作者：{{sourse.sourseAuthor}}</h4>
							<a>关注<span class="icon-heart"></span></a>
						</div>
						<div id="intro">
							<h4>视频简介:</h4>
							<p>{{sourse.sourseIntro}}</p>
						</div>
					</div>
				</div>
			</div>
			<div id="divr" style="color: white;">
				<h4>相关推荐</h4>
				<ul>
					<li v-for="(recom,index) in recommend">
						<div id="images">
							<a href="video.html">
								<img :src="recom.sourseImg" alt="" />
								<div id="name">{{recom.sourseName}}</div>
							</a>
						</div>
						<div id="intro2">
							<h4>课程简介:</h4>
							<p>{{recom.sourseIntro}}</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/vue2.5.js" ></script>
		<script type="text/javascript" src="js/axios.min.js" ></script>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/global.js" ></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/layer/layer.js" ></script>
		<script type="text/javascript" src="js/param.js" ></script>
		
		<script>
			//获得传递过来的部门id
			var sourseId = getParam('sourseId');
			//vue实例
			var vue = new Vue({
				el:'#container',
				data:{
					sourse:{
						sourseId:sourseId,
						sourseName:'sourseName',
						soursePath:'soursePath',
						sourseAuthor:'sourseAuthor',
						sourseIntro:'sourseIntro',
						collectCount:'collectCount'
					},
					recommend:[]
				},
				methods:{
//					get:function(){
//						//ajax请求
//						axios.get(baseUrl + '/sourse/get',{
//								params:{
//									sourseId:sourseId
//								}
//							})
//							.then(function(response){								
//								this.sourse = response.data;								
//							}.bind(this))
//							.catch(function(error){
//								layer.msg('课程请求失败');
//							});
//					},
					collect:function() {
						var collectCount = parseInt($('#count').text()) + 1;
						axios.get(baseUrl + '/sourse/updateCount',{
								params:{
									sourseId:sourseId,
									collectCount:collectCount
								}
							})
							.then(function(response){								
								$('#count').text(collectCount);
								$('.icon-star-full').attr("style","color:orange");
							}.bind(this))
							.catch(function(error){
								layer.msg('收藏失败');
							});
					},
					querySourse:function() {
						axios.get(baseUrl + '/sourse/get',{
								params:{
									sourseId:sourseId
								}
							})
							.then(function(response){
								this.sourse = response.data;
								var jobId = response.data.job.jobId;
								axios.get(baseUrl + '/sourse/jobMajors',{
									params:{
										jobId:jobId
									}
								})
								.then(function(response){								
									this.recommend = response.data;
								}.bind(this))
								.catch(function(error){
									layer.msg('收藏失败');
								});
							}.bind(this))
							.catch(function(error){
								layer.msg('网络连接失败');
							});
					}
				},
				mounted:function(){
//					this.get();
					this.querySourse();
				}
			});
		</script>
		
	</body>
</html>
